<script setup>
import { ref, defineOptions, inject, watch } from 'vue'
import { generatorOptions } from '@/utils/config.js'
import { useTemplateStore } from '@/stores/template.js'
import { ElMessage } from 'element-plus'

const templateStore = useTemplateStore()
defineOptions({
  name: 'EjsTemplate'
})
const closeDialog = inject('closeDialog')
const data = ref({
  fileType: '',
  vmTemplate: ''
})
const changeVmTemplate = () => {
  data.value.vmTemplate = templateStore.template[data.value.fileType]
}
const saveTemplate = () => {
  templateStore.refreshTemplate(data.value.fileType, data.value.vmTemplate)
  // 保存数据到 uTools 的数据库中
  if (window.utools) {
    const template = window.utools.dbStorage.getItem('template')
    if (template){
      template[data.value.fileType] = data.value.vmTemplate
      window.utools.dbStorage.setItem('template', JSON.stringify(template))
    } else {
      window.utools.dbStorage.setItem('template', JSON.stringify(templateStore.template))
    }
  }
  ElMessage.success('保存成功')
}
const clearLocalStorage = () => {

}
</script>
<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-select
          v-model="data.fileType"
          placeholder="生成类型"
          @change="changeVmTemplate"
          filterable>
        <el-option
            v-for="item in generatorOptions"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
    </el-col>
    <el-col :span="12">
      <el-button @click="saveTemplate" type="primary">保存配置</el-button>
      <el-button @click="clearLocalStorage" type="danger">重置配置</el-button>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="23">
      <el-input
          type="textarea"
          class="textarea"
          :row="8"
          v-model="data.vmTemplate"
      />
    </el-col>
  </el-row>
</template>

<style></style>
